<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="字段一">
        <el-input v-model="formInline.user" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="字段二">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="上海" value="1" />
          <el-option label="北京" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="addHandle">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :border="true" style="width: 100%">
      <el-table-column prop="date" label="日期" width="110" />
      <el-table-column prop="name" label="姓名" width="70" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="135">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 12px"
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog v-model="dialogShow" title="编辑" width="800px" draggable>
      <BaseForm
        ref="refBaseForm"
        v-if="dialogShow"
        v-bind="formConfig"
        @changeItem="changeItemHandel"
      ></BaseForm>
      <template #footer>
        <span class="flex-box justify-center">
          <el-button type="primary" @click="submitForm(refBaseForm?.refForm)"
            >保存</el-button
          >
          <el-button @click="dialogShow = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
::v-deep .el-dialog__footer {
  padding-top: 0px;
}
</style>
<script lang="ts" setup>
import BaseForm from "@/components/form/BaseForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance } from "element-plus";
import tableJson from "@/fakejson/table.json";
import { reactive, ref, nextTick } from "vue";
import { useBaseTableDialog } from "@/hooks/pages/useBaseTableDialog";
const { getDefaultFormValue, formConfig, changeItemHandel, submitForm } =
  useBaseTableDialog();
const refBaseForm = ref<{
  refForm: FormInstance;
  submitForm: (formEl: FormInstance | undefined) => void;
  resetForm: (formEl: FormInstance | undefined) => void;
}>();
const formInline = reactive({
  user: "",
  region: "",
});
const onSubmit = () => {
  console.log("submit!");
};
const tableData = tableJson.data;
interface User {
  date: string;
  name: string;
  address: string;
}
const dialogShow = ref(false);
const addHandle = () => {
  dialogShow.value = true;
  Object.assign(formConfig.formValue, getDefaultFormValue());
  console.log("新增", formConfig.formValue);
  nextTick(() => {
    if (refBaseForm.value) {
      // refBaseForm.value.resetForm(refBaseForm.value.refForm);
    }
  });
};
const handleEdit = (index: number, row: User) => {
  dialogShow.value = true;
  Object.assign(formConfig.formValue, {
    testinput: "xxxxx",
    testselect: 1,
    testinput1: "yyyyyy",
    inputnum: 1,
    date: "2022-06-09",
    time: "20:00:00",
    cascader: "",
    groupInput: { a: "aaa", b: "bbb" },
  });
  console.log("编辑", formConfig.formValue);
  nextTick(() => {
    if (refBaseForm.value) {
      // refBaseForm.value.resetForm(refBaseForm.value.refForm);
    }
  });
};
const handleDelete = async (index: number, row: User) => {
  console.log(index, row);
  try {
    await ElMessageBox.confirm("是否确认删除", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    });
    ElMessage({
      type: "success",
      message: "Delete completed",
    });
  } catch {
    ElMessage({
      type: "info",
      message: "Delete canceled",
    });
  }
};

const currentPage = ref(4);
const pageSize = ref(100);
const small = ref(true);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
